<template>
    <el-menu
            :unique-opened="uniqueOpened"
            :default-active="defaultActive"
            :mode="mode"
            :background-color="backgroudColor"
            :text-color="textColor"
            :active-text-color="activeTextColor"
            @select="menuClick"
            :style="menuStyles"
            :collapse="collapse"
    >
        <MenuTree :menuList="menuList"></MenuTree>
    </el-menu>
</template>

<script>
    import MenuTree from './MenuTree.vue';

    export default {
        components: {MenuTree},
        props: {
            //是否水平折叠收起菜单
            collapse: {
                type: Boolean,
                default: false,
            },
            //是否只保持一个子菜单的展开
            uniqueOpened: {
                type: Boolean,
                default: true,
            },
            //选中菜单文字颜色::十六进制
            activeTextColor: {
                type: String,
                default: '#55aaff',
            },
            //文字颜色::十六进制
            textColor: {
                type: String,
                default: '#fff',
            },
            //背景颜色::十六进制
            backgroudColor: {
                type: String,
                default: '#304156',
            },
            //菜单数据
            menuList: {
                type: Array,
                required: true,
            },
            //菜单模式
            mode: {
                type: String,
                default: 'horizontal',
                validator: (value) => ['horizontal', 'vertical'].includes(value)
            },
            // 垂直模式下的宽度，默认200px
            verticalWidth: {
                type: String,
                default: '200px'
            },
            //垂直模式下的高度，默认100%
            verticalHeight: {
                type: String,
                default: '100%'
            },
            //默认选中菜单
            defaultActive: {
                type: String,
            }
        },
        computed: {
            // 垂直模式高度设置
            menuStyles() {
                if (this.mode === 'vertical') {
                    return {
                        width: this.verticalWidth,
                        height: this.verticalHeight,
                    }
                }
            }
        },
        methods: {
            menuClick(url) {
                // 通过url查找对应的菜单项
                const item = this.findMenuItem(this.menuList, url);
                if (!item) return;
                if (item.blank) {
                    // 新开页签：只打开新窗口，不更新当前激活状态
                    const routeUrl = this.$router.resolve({path: item.url});
                    window.open(routeUrl.href, '_blank');
                    // 2. 关键：强制将激活状态重置为当前路由（绕过组件自动更新）
                    window.location.reload();
                } else {
                    // 正常跳转：更新激活状态并跳转路由
                    this.$router.push(item.url);
                }
            },
            // 辅助方法：通过url查找菜单项（避免依赖$attrs）
            findMenuItem(list, url) {
                for (const item of list) {
                    if (item.url === url) return item;
                    if (item.children && item.children.length) {
                        const found = this.findMenuItem(item.children, url);
                        if (found) return found;
                    }
                }
                return null;
            }
        }
    };
</script>
<style>
    /*子菜单宽度去掉最小值*/
    .el-submenu .el-menu-item {
        min-width: auto;
    }
    /* 针对垂直模式菜单的边框处理 */
    .el-menu {
        border-right: none !important;
    }
    /* 处理折叠状态下的边框 */
    .el-menu.el-menu--collapse {
        border-right: none !important;
    }

</style>
